<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			html, body, div, ul, li, p {margin: 0; padding: 0; }
#mainBox { height: 30px;  overflow: hidden; }
#mainBox  ul li{height:30px;line-height: 30px;}
		</style>
		
	</head>
	<body>
		<div id="mainBox">
			<ul id="sub1">
				<li>《水调歌头》</li>
				<li>苏轼</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
			var box = document.getElementById('mainBox'),
		    ul1 = document.getElementById('sub1'),
		    ul2 = ul1.cloneNode(true),
		    speed = 5,
		    timer;
			function goUp () {
			    if (box.scrollTop == ul1.scrollHeight) {
			        box.scrollTop = 0;
			        timer = setTimeout("goUp()",speed);
			    } else {
			        if (box.scrollTop % 30 == 0) {
			            box.scrollTop ++;
			            timer = setTimeout("goUp()", speed * 200);
			        } else {
			            box.scrollTop ++;
			            timer = setTimeout("goUp()",speed);
			        }
			    }
			}
			
			box.onmouseover = function () {
			    clearTimeout(timer);
			}
			box.onmouseout = function () {
			    clearInterval(timer);
			    timer = setTimeout("goUp()",speed);
			}
			window.onload = function () {
			    goUp();
			}
		</script>
</html>
